<script lang="ts" setup>
import { gsap } from 'gsap'

const onEnter = (el: HTMLElement, done: () => void) => {
  gsap.set(el, { autoAlpha: 0 })
  gsap.to(el, {
    autoAlpha: 1,
    duration: 0.25,
    onComplete: () => {
      gsap.set(el, { clearProps: true })
      done()
    },
  })
}

const onLeave = (el: HTMLElement, done: () => void) => {
  gsap.to(el, { autoAlpha: 0, duration: 0.2, onComplete: done })
}
</script>

<template>
  <transition :css="false" appear mode="out-in" @enter="onEnter" @leave="onLeave">
    <slot />
  </transition>
</template>
